<template>
	<view class="indent_info">
		<view class="sub_title">订单信息</view>
		<view class="infos">
			<view class="row" v-for="it in mapInfo" :key="it.text">
				<p>{{it.text}}</p>
				<uni-dateformat 
					v-if="it.key === 'create_time'" 
					:date="indent[it.key]" :threshold="[0,0]"
					format="yyyy-MM-dd hh:mm:ss"
				>
				</uni-dateformat>
					<!-- :style="{fontSize: it.text === '就餐时间' ? `20rpx` : ''}" -->
				<span 
					v-else
					v-html="it.key ? indent[it.key] : it.format"
				>
					
				</span>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'indent-info',
		computed: {
			mapInfo() {
				const {order_form_num, create_time, dining_date, dining_place, guest_type, dining_person_num} = this.indent
				return [
					{text: '订单号', format: order_form_num._value },
					{text: '取餐号', key: 'order_form_queue'},
					{text: '申请人', key: 'petitioner'},
					{text: '就餐地区', key: 'region' },
					{text: '就餐场合', format: dining_place.map(e => e.text).join(', ')},
					{text: '费用归口部门', key: 'cost_target'},
					{text: '来宾类型', format: guest_type[0].guest_type},
					{text: '接待等级', key: 'reception_estate'},
					{text: '下单时间', key: 'create_time' },
					{text: '就餐时间', format: dining_date.map((e, i) => `${i ? '结束' : '开始'}: ${e}`).join('<br/>') },
					{text: '就餐人数', format: dining_person_num + '人' },
					{text: '订单备注', key: 'user_remark' }
				]
			}
		},
		props: ['indent']
	}
</script>

<style lang="scss">
	.indent_info {
		margin-top: 20rpx;
		background-color: #fff;
		border-radius: 12rpx;
		padding: 0 20rpx;
		.sub_title {
			padding: 20rpx 0;
			font-size: 28rpx;
			font-weight: 500;
			border-bottom: 1px solid #f2f2f2;
		}
		.infos {
			padding-bottom: 10rpx;
			.row {
				padding: 16rpx 0;
				display: flex;
				align-items: flex-start;
				justify-content: space-between;
				font-size: 26rpx;
				p {
					color: #a0a0a0;
				}
				span {
					display: flex;
					justify-content: flex-end;
					width: 400rpx;
				}
			}
		}
	}
</style>